<template>
  <div class="page_vue">
    <div class="header">
      <!-- <div style="width: 300px" v-if="isShow"></div> -->
      <!-- 头部tab切换(当AI没有时就不显示tab) -->
      <!-- <div class="header_box">
        <div class="page_header_top" v-if="isTypeShow" :style="widthStyle">
          <div class="top">
            <div class="top-text" :class="{ 'search-active': activeTab === 'search' }" @click="setActiveTab('search')">
              <el-icon class="icon_size"><Search /></el-icon> 文档搜索
            </div>

            <div class="top-text" :class="{ 'search-active': false }" @click="setActiveTab('AI')">
              <svg-icon icon-class="AIFile" class="icon_size"></svg-icon> AI问答
            </div>
          </div>
        </div>
      </div> -->

      <!-- 搜索 -->
      <div class="page_header">
        <!-- <div class="hearder_search_img">
        <img src="./../../../../assets/images/home/search5.jpg" />
      </div> -->
        <div class="hearder_search">
          <SearchHeader ref="searchHeaderRefs" />
        </div>
      </div>
    </div>

    <div class="header_top">
      <div class="page_body">
        <!-- 最近查看 -->
        <div class="item_box item_box_bg">
          <DocumentList :dataList="RecentViewList" />
        </div>

        <div class="item_box_right">
          <!-- 常用功能 -->
          <div class="item_box_1 item_box_bg">
            <CommonTools />
          </div>
          <!-- 图表 -->
          <div class="item_box_2 item_box_bg">
            <TypeStatistics />
          </div>
        </div>
      </div>
    </div>
    <!-- ai页面(舍弃/页面还保留在) -->
    <!-- <div class="ai-box" v-if="activeTab === 'AI'">
      <HeaderAi ref="headerAiRef" />
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ApiAIShow } from '@/api/personDoc/aiApi';
import { ref, onMounted } from 'vue';
import SearchHeader from './components/search-header.vue'; //搜索
import DocumentList from './components/document-list.vue'; //最近查看
import CommonTools from './components/common-tools.vue'; //常用功能
import TypeStatistics from './components/type-statistics.vue'; //文件类型统计
import HeaderAi from '@/views/personDoc/AiFile/header-ai.vue'; //文件/ai问答
import { ApiPerFileMy } from '@/api/personDoc/personDocApi';
const router = useRouter();
const RecentViewList = ref([]);
const searchHeaderRefs = ref(null);
const headerAiRef = ref(null);

const activeTab = ref('search'); // 默认选中第一个按钮

// 设置 page_header 的样式
const headerStyle = ref({
  height: '180px' // 初始高度
});

const searchPaddingStyle = ref({
  padding: '25px 0 0px' // 初始 padding
});

const widthStyle = ref({
  width: '100%'
});

const isShow = ref(false);

// 获取最近查看文件
const getRecentView = () => {
  let oParam = {
    page: 0,
    size: 10,
    type: 'personal'
  };

  ApiPerFileMy(oParam).then((res) => {
    if (res.code == 200) {
      // 假设 res.rows 是一个数组
      RecentViewList.value = res.rows.map((item) => {
        // 在每个 item 中添加一个 type 字段，其值为 fileSuffix
        return {
          ...item, // 保留原有的属性
          type: 'file',
          suffix: item.fileSuffix // 添加 suffix 字段，值为 fileSuffix
        };
      });
    }
  });
};

// 重定向跳转到分享页面
const skipRedirectClick = () => {
  let urlArr = window.location.origin;
  let hash = urlArr[urlArr.length - 1];
  let routerObj = {
    hash: hash
  };
  const { href } = router.resolve({
    path: '/navigaAi'
    // query: routerObj
  });

  window.open(href, '_blank');
};
// 切换选中的 tab
// const setActiveTab = (tab) => {
//   activeTab.value = tab;
//   if (tab === 'search') {
//     activeTab.value = 'search'; // 确保始终保持 'search' 的样式
//     headerStyle.value.height = '140px';
//     widthStyle.value.width = '100%';
//     isShow.value = false;
//   } else {
//     skipRedirectClick();
//     activeTab.value = 'search'; // 确保始终保持 'search' 的样式
//     // headerStyle.value.height = '96vh';
//     // widthStyle.value.width = 'calc(100% - 300px)';
//     // isShow.value = true;
//   }
// };

const isTypeShow = ref(false) as any;
// 判断是否显示AI
const getIsShow = () => {
  let oParam = {
    configKey: 'personal_chat'
  };
  ApiAIShow(oParam).then((res) => {
    isTypeShow.value = res;
  });
};

//判断单独显示搜索文档的样式
watch(
  isTypeShow,
  (newValue, oldValue) => {
    if (newValue === false) {
      headerStyle.value.height = '180px';
      searchPaddingStyle.value.padding = '70px 0 0px';
    } else {
      headerStyle.value.height = '140px';
      // 当 isTypeShow 为 true 时，恢复初始 padding
      searchPaddingStyle.value.padding = '25px 0 0px';
    }
  },
  { deep: true, immediate: true }
);

onMounted(() => {
  // console.log(searchHeaderRefs.value.showHight);
  getIsShow();
  getRecentView();
});
</script>

<style scoped lang="scss">
.header_box {
  display: flex;
}
.header {
  // height: 225px;
  // border: 1px solid red;
}
.page_vue {
  background-image: url('../../assets/images/home/HomePage.png');
  background-size: cover;
  // background-image: linear-gradient(to bottom, #f0f6ff, #ffffff);
  // background-image: linear-gradient(to bottom, #c3eae5, #ffffff);
  // background-color: #f5f5f5;

  height: calc(100vh - 52px);
  overflow-y: auto;
}

.page_header {
  transition: height 0.3s ease;
  /* 平滑过渡 */
  // background-color: #ffffff;
  width: 100%;
  height: 200px;
  overflow: hidden;
  // overflow-y: auto;
  // background-image: url('./../../../../assets/images/home/search5.jpg');
  // background-color: #f0f6ff;
  // background-image: linear-gradient(to bottom, #c5d8f5, #ffffff); //有问题是可以打开

  // position: relative;
  // background: #f5f5f5;
  // background-image: linear-gradient(90deg, transparent 50px, #ffb4b8 50px, #ffb4b8 52px, transparent 52px),
  //   linear-gradient(#e1e1e1 0.1em, transparent 0.1em);
  // background-size: 100% 30px;
  .hearder_search_img {
    position: absolute;
    z-index: 0;
    right: 0;

    img {
      width: 100%;
    }
  }

  .hearder_search {
    width: 600px;
    margin: 0 auto;
    padding: 70px 0 0px;
    // padding: 25px 0 0px;

    display: flex;
    align-items: center;
    flex-direction: column;
  }
}

.header_top {
  // border: 1px solid yellow;
  height: calc(100vh - 350px);
  // height: calc(100vh - 280px);
}

.page_body {
  width: 100%;
  overflow-x: auto;
  // display: grid;
  // grid-template-columns: repeat(2, 1fr);
  padding: 20px 80px;
  display: flex;
  // height: calc(100vh - 280px);
  min-height: 635px;
}

.item_box {
  flex: 1;
  // min-width: 600px;

  border-radius: 16px;
  // padding: 16px;
  position: relative; //用于表格自适应宽度
}

.item_box_bg {
  background-color: #ffffff;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
  // background-image: linear-gradient(to bottom, #ebf1fc, #ffffff) !important;
}

.item_box_right {
  width: 500px;
  border-radius: 16px;
  margin-left: 30px;
}

.item_box_1 {
  padding: 16px;
  border-radius: 16px;
}

.item_box_2 {
  padding: 16px;
  border-radius: 16px;
  margin-top: 30px;
}

/*******************************头部 */

.page_header_top {
  // width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 25px 0 0px;
}

.top {
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.4);

  .top-text {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    font-size: 15px;
    border-radius: 10px;
    cursor: pointer;
    letter-spacing: 1.5px;
  }
}

.search-active {
  font-weight: 600;
  color: #202020;
  background: #ffffff;
  box-shadow: 0 4px 16px 1px #0000000f;
}

.icon_size {
  font-weight: 600;
  margin-right: 6px;
}

.ai-box {
  padding: 18px 0px 0px;
}
</style>
